import { type FC } from 'react';
import { useMemoizedFn } from 'ahooks';
import { Text, TouchableOpacity } from 'react-native';
import styles from './styles';

export type HashTagType = {
  label: string;
  value: string;
}

type HashTagProps = HashTagType & {
  active?: boolean;
  onPress?: (item: HashTagType) => void;
}

const Hashtag: FC<HashTagProps> = (props) => {
  const { active } = props;

  const onPress = useMemoizedFn(() => {
    props.onPress?.({
      label: props.label,
      value: props.value
    });
  });

  return (
    <TouchableOpacity
      onPress={onPress}
      style={[
        styles.hashtag,
        active && styles.active
      ]}
    >
      <Text style={[
        styles.text,
        active && styles.active_text
      ]}>
        {props.label}
      </Text>
    </TouchableOpacity>
  )
}

export default Hashtag;